<template>
  <div class="mpmp">
      
      <Typebar/>
      
        <div class="bacimage">
            <img src="https://brup.shengri.cn/goods/2020/07/FitXZYvXDNDRSLeBhYyAE5CxpNg5.jpg" alt="">
        </div>
        <div class="topi">
            <img src="https://brup.shengri.cn/goods/2018/11/FntXitGbZTgrryWN7yRNQN00gulO.png " alt="">
        </div>
       <p class="ai">心意鲜花</p>
       <p class="red"><span class="iconfont icon-42"></span><span class="hint">心意鲜花，懂你心意</span></p>
        <div class="pin">
            <p class="tui">-品牌推荐-</p>
            <section>
                <ul class="pint">
                   <Bz v-for="(v,i) in arr" :key="i" :title="v.title" :imgfirst="v.imgfirst" :nowprice="v.nowprice" :flowerId="v.flowerId"/>
                </ul>
            </section>
        </div>
        <div class="xia">
            <van-sticky>
            <ul class="s1">
                <li><router-link to="/heartbrand/era">全部</router-link></li>
                <li><router-link to="/heartbrand/erc">销量</router-link></li>
                <li><router-link to="/heartbrand/erd">价格</router-link></li>
            </ul> 
            </van-sticky>
            <router-view></router-view>
        </div>
       
  </div>
</template>

<script>
import Typebar from "c/flower/typebar.vue"
import Bz from "c/flower/brandzi.vue"
import {getlink} from "a/getapi.js"
export default {
  components:{
        Typebar,
        Bz
    },
    data(){
        return {
            arr:[
                
            ]
        }
    },
    mounted(){
        getlink("/demo/typeinfo").then((ok)=>{
            this.arr=ok.data.typeflower 
            console.log(ok)

        })
    },  
  }
</script>
<style scoped>
    .mpmp{
        width: 100%;
       
    }
.bacimage{
    width: 100%;
    height: 1.6rem;
    margin-top: 0.8rem;
}
.bacimage img{
    width: 100%;
    height: 100%;
  
}
.ai{
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.16rem;
}
.red{
    margin-top: 0.06rem;
    /* line-height: 1rem; */
    padding: 0 0.08rem;
    font-size: 0.12rem;
}
.pic{
    width: 1.4rem;
    height: 1.4rem;
}
.red .iconfont{
    margin-right: 0.04rem;
}
.s1{
    border: 0.01rem solid gainsboro;
    line-height: 0.36rem;
    display: flex;
    justify-content: space-around;
    font-size: 0.14rem;
    text-align: center;
    color: black;
    background-color: white;
}
.s1 li{
    color: black;
}
.topi{
    width: 0.7rem;
    height: 0.7rem;
    position: absolute;
    top: 2.01rem;
    left: 42%;
}
.topi img{
    width: 100%;
    height: 100%;
}
.tui{
    line-height: 0.6rem;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 0.2rem;
    color: #333;
}
section{
    width: 100%;
    height: 2.12rem;
    text-align: center;
}
.pint{
    margin-top: 0.17rem;
    text-align: left;
    overflow: hidden;
    font-size: 0;
    padding: 0 0.15rem;
    display: flex;
    overflow-x: scroll;
    /* justify-content: space-around;
    flex-wrap: nowrap;
    flex-shrink: inherit; */
}
.router-link-exact-active{
    color:red;
}
</style>